<template>
    <div class="box settle-sub-box">
        <div class="avatarBox">
            <div class="img" v-if="detail.doctorRep">
                <el-image v-if="detail.doctorRep.avatar"
                          fit="contain"
                          :src="detail.doctorRep.avatar ? ('/_api' + detail.doctorRep.avatar): '/static/images/doctor.png'">
                    <div slot="placeholder" class="image-slot">
                        <i class="el-icon-loading"></i>
                    </div>
                    <div slot="error" class="image-slot">
                        <i class="el-icon-picture-outline"></i>
                    </div>
                </el-image>
                <img src="/static/images/doctor.png" class="el-image" fit="contain" v-else>
            </div>
            <div class="name" v-if="detail.doctorRep">{{detail.doctorRep.name}}</div>
            <div v-if="detail.doctorRep">{{detail.dept}} 哈尔滨市第五医院</div>
            <div class="price" v-if="detail.doctorRep.repPrice || detail.doctorRep.repPrice == 0">
                <span>挂号费:</span>
                <span class="priceD">￥{{detail.doctorRep.repPrice.toFixed(2)}}</span>
            </div>
        </div>
        <div class="introduction">
            <div class="introTitle clearfix">
                <div>医生简介</div>
            </div>
            <div class="text" v-if="detail.doctorRep">
                {{detail.doctorRep.introduction}}
                <div class="empty" v-if="!detail.doctorRep.introduction">该医生暂无简介</div>
            </div>
        </div>
    </div>
</template>

<script>
    import {PopupPicker, Group, Confirm, Popup} from 'vux'

    export default {
        data() {
            return {
                appointList: [],
                introduction: false,
                detail: {},
                doctorId: '',
                dept: '',
                date: ''
            }
        },
        mounted() {
            if (this.$route.query.dept) this.dept = this.$route.query.dept
            if (this.$route.query.date) this.date = this.$route.query.date
            if (this.$route.query.id) this.doctorId = this.$route.query.id
            this.getDetail()
        },
        methods: {
            getDetail() {
                this.$http.get('/doctor/appointment/expertScheduleDetail', {
                    date: this.date,
                    dept: this.dept,
                    doctorId: this.doctorId
                }).then(result => {
                    if (result.success) {
                        this.detail = result.data
                    }
                })
            }
        },
        components: {
            PopupPicker,
            Group,
            Confirm,
            Popup
        }
    }
</script>

<style scoped lang="less">
    .box {
        width: 100%;
        height: 100%;
        background-color: #f4f4f4;

        .avatarBox {
            width: 100%;
            height: 4rem;
            padding-top: .4rem;
            /*background-color: rgb(132, 210, 247);*/
            background: url('../../static/images/bg.png') no-repeat center;
            background-size: cover;

            div {
                text-align: center;
                color: #fff;
            }

            .name {
                margin: .2rem 0;
                font-size: .32rem;
            }

            .price {
                color: #FEFF8F;
            }

            .priceD {
                font-weight: bold;
            }

            .img {
                width: 1.5rem;
                height: 1.5rem;
                margin: 0 auto;
                background-color: #eee;
                border-radius: 50%;
                overflow: hidden;

                .el-image {
                    width: 100%;
                    height: 100%;
                }
            }
        }

        .introduction {
            width: 100%;
            padding: .3rem .2rem;
            background-color: #fff;

            .introTitle {

                div {

                    &:nth-child(1) {
                        float: left;
                    }

                    &:nth-child(2) {
                        float: right;
                        color: #4f86ec;

                        i {
                            margin-left: .1rem;
                        }
                    }
                }
            }

            .text {
                margin-top: .2rem;

                .empty {
                    text-align: center;
                    color: #999;
                    margin-top: .4rem;
                }
            }
        }
    }
</style>
